<template>
  <view class="content">
	<view class="vm-search">
		<input class="vm-search-input" :value="searchValue" @confirm = "onSearchClick()" placeholder="搜索" />
		<view class="vm-search-scan" @click="onQrCodeScanClick()"></view>
	</view>
	<view class="vm-title">设备列表</view>
	<view class="vm-chunk">
		<view class="vm-chunk-title" @click="spreadCli(0)">筛选条件<view class="vm-chunk-title-image" :class="spreadArr[0].value===1?'':'vm-chunk-title-rotate'"></view></view>
		<view class="vm-chunk-content" :class="spreadArr[0].value===1?'vm-chunk-contentOpen':'vm-chunk-contentClose'">
			<uni-forms :modelValue="formData">
				<uni-forms-item label="场馆" class="vm-chunk-content-select">
					<uni-data-select v-model="formData.changGuan" :localdata="changGuanList" @change="changGuanCha" placeholder="请选择" :clear="false"></uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="楼层" name="value" class="vm-chunk-content-select">
					<uni-data-select v-model="formData.louCeng" :localdata="louCengList" @change="louCengCha" placeholder="请选择" :clear="false"></uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="区域" name="value" class="vm-chunk-content-select">
					<uni-data-select v-model="formData.quYu" :localdata="quYuList" placeholder="请选择" :clear="false"></uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="所属系统" name="value" class="vm-chunk-content-select">
					<uni-data-select v-model="formData.xiTong" :localdata="xiTongList"  placeholder="请选择" :clear="false"></uni-data-select>
				</uni-forms-item>
			</uni-forms>
			 <button class="vm-chunk-content-button" @click="onSearchClick()"><icon type="search" size="14" color="#016aed" /><text>查 询</text></button>
		</view>
	</view>
	
	<view class="vm-chunk" v-for="(item,index) in dataList" :key="index">
		<view class="vm-chunk-title" @click="spreadCli(index+1)">{{item.code}}</view>
		<view class="vm-chunk-content" :class="spreadArr[index+1].value===1?'vm-chunk-contentOpen':'vm-chunk-contentClose'">
			<uni-list class="vm-chunk-content-list" :border="false">
				<uni-list-item title="设备名称" :rightText="item.name"></uni-list-item>
				<uni-list-item title="所属系统" :rightText="item.system"></uni-list-item>
				<uni-list-item title="所属位置" :rightText="item.regionName"></uni-list-item>
				<uni-list-item title="通道名称" :rightText="item.sname"></uni-list-item>
			</uni-list>
			<view class="vm-chunk-content-operate">
				 <button class="vm-chunk-content-operate-button" @click="viewCli(item,'sb')">设备详情</button>
				 <button class="vm-chunk-content-operate-button" @click="viewCli(item,'xc')">巡查详情</button>
				 <button class="vm-chunk-content-operate-button" @click="viewCli(item,'by')">保养记录</button>
				 <button class="vm-chunk-content-operate-button" @click="viewCli(item,'wx')">维修记录</button>
			</view>
		</view>
	</view>
	
  </view>
</template>

<script>
	import {getRegeionList,getSystemList,getDeviceList} from '../../../api/device/device.js'
	
	// #ifdef APP-PLUS
	const uhfModule = uni.requireNativePlugin("Alvin-UhfDongJi")
	const dJQrCodeScanModule = uni.requireNativePlugin("Alvin-DJQrCode");

	// #endif
  export default {
	  data(){
		  return{
			searchValue:"",
			qrCode:"",
			spreadArr:[{value:1}],
			formData:{
				changGuan: 1,
				louCeng: 2,
				quYu: 3,
				xiTong: 4,
			},
			changGuanList: [],
			louCengList: [],
			quYuList: [],
			xiTongList: [],
			parentId:'',
			searchType:'2' , //2：场馆，3：楼层；4：区域
			dataList:[],
			rfidList:[]
		  }
	  },
    onLoad: function() {
		// #ifdef APP-PLUS
		this.initDevicePlugin()
		// #endif
		this.getSystemList()
		this.getAreaList(this.parentId,'2')
    },
	onUnload() {
		// #ifdef APP-PLUS
		uhfModule.doReleaseDevice()
		dJQrCodeScanModule.doReleaseDevice()
		// #endif
	},
	methods:{
		initDevicePlugin(){
			let _this = this
			console.log("初始化设备")
			uhfModule.initDevice(false,res=>{
				if(res){
					console.log("res",res)
					let epc = res.rawEpc
					if(epc !=null && !_this.rfidList.includes(epc)){
						_this.rfidList.push(epc)
					}
					
				}
			})
			dJQrCodeScanModule.doInitDevice()
			setTimeout(() => {
			      uhfModule.setKeyMode(2)
			    }, 1000);
		},
		onQrCodeScanClick(){
			let _this = this
			dJQrCodeScanModule.startScan(res=>{
				if(res){
					_this.searchValue = res.barcode
				}
			})
		},
		onSearchClick(){
			let param = {
				"searchValue":this.searchValue,
				"code":this.qrCode,
				"rfids":this.rfidList
			}
			console.log("param",param)
			this.spreadArr=[this.spreadArr[0]]
			getDeviceList(param).then(res=>{
				console.log("res",res)
				if(res){
					res.data.forEach((item,index)=>{this.spreadArr.push({value:1})})
					this.dataList = res.rows
				}
			})
		},
		getAreaList(parentId,searchType){
			getRegeionList(parentId,searchType).then(res=>{
				if(res){
					res.rows.forEach(item=>{
						item.text=item.name
						item.value=item.code
					})
					if(searchType==='2'){
						this.changGuanList =res.rows
					}else if(searchType==='3'){
						this.louCengList =res.rows
					}else if(searchType==='4'){
						this.quYuList =res.rows
					}
				}
			})
		},
		changGuanCha(e){
			let data=this.changGuanList.find(r=>r.code===e)
			this.getAreaList(data.parent,'3')
			
		},
		louCengCha(e){
			let data=this.louCengList.find(r=>r.code===e)
			this.getAreaList(data.parent,'4')
		},
		getSystemList() {
			getSystemList().then(res=>{
				if(res){
					res.forEach(item=>{
						item.text=item.name
						item.value=item.code
					})
					this.xiTongList =res
				}
			})
		},
		spreadCli(index){
			this.spreadArr[index].value=this.spreadArr[index].value===1?0:1
		},
		viewCli(item,e) {
			 if(e==="sb"){
				this.$tab.navigateTo('/pages/business/equipmentManagement/equipmentDetails?id='+item.id)
			 }else if(e==="xc"){
				this.$tab.navigateTo('/pages/business/equipmentManagement/patrolDetails?id='+item.id)
			 }else if(e==="by"){
				this.$tab.navigateTo('/pages/business/equipmentManagement/manintainRecordBy?id='+item.id)
			 }else if(e==="wx"){
				this.$tab.navigateTo('/pages/business/equipmentManagement/manintainRecordWx?id='+item.id)
			 }
		}
	}
  }
</script>
<style lang="scss">
  .content {
	 padding: 0 3%;
	 box-sizing: border-box;
	  .vm-search{
		  width: 100%;
		  margin-top: 20rpx;
		  display: flex;
		  justify-content: space-between;
		  &-input{
			  width:calc(100% - 90rpx);
			  height: 78rpx;
			  line-height: 78rpx;
			  border-radius: 16rpx;
			  padding: 0 10rpx 0 50rpx;
			  box-sizing: border-box;
			  font-size: 26rpx;
			  background: #fff url(../../../static/images/business/equipment-01.png) 10rpx 50% no-repeat;
			  background-size: 24rpx 24rpx;
			  color: #ccc;
		  }
		  &-scan{
			  width: 78rpx;
			  height: 78rpx;
			  background: #fff url(../../../static/images/business/equipment-02.png) 50% 50% no-repeat;
			  background-size: 24rpx 24rpx;
				border-radius: 16rpx;
		  }
	  }
	  .vm-title{
		  font-size: 38rpx;
		  font-weight: bold;
		  color: #000;
		  line-height: 50rpx;
		  line-height: 100rpx;
	  }
	  .vm-chunk{
		  width: 100%;
		  padding: 20rpx;
		  box-sizing: border-box;
		  border-radius: 18rpx;
		  margin-bottom: 20rpx;
		  background: linear-gradient(to bottom,#edf9ff 0%,#fff 20%);
		  &-title{
			  font-size: 34rpx;
			  color: #000;
			  font-weight: 500;
			  line-height: 80rpx;
			  height: 80rpx;
			  position: relative;
			   &-image{
				   width: 60rpx;
				   height: 60rpx;
				   background: transparent url(../../../static/images/business/equipment-04.png) no-repeat;
				   background-size: 100% 100%;
				   position: absolute;
				   top: 10rpx;
				   right: 20rpx;
			   }
			   &-rotate{
				    transform: rotate(180deg);
			   }
		  }
		  &-content{
			  &-select{
				  background-color: transparent;
				   border-bottom: solid 1px #e5e5e5;
				   margin-bottom: 20rpx;
				   /deep/ .uni-forms-item__label{
					   font-size: 32rpx;
					   width: 170rpx!important;
				   }
				  /deep/ .uni-select{
					border: none;
				  }
				  /deep/ .uni-select__input-box{
					  text-align: right;
				  }
				  /deep/ .uni-select__input-text{
					  padding-right: 10rpx;
				  }
			  }
			  &-button{
				  background-color: #e7f1fc;
				  width: 90%;
				  margin: 10rpx 5%;
				  border-radius: 50rpx;
				  border:1px solid #e7f1fc;
				  color: #016aed;
				  display: flex;
				  align-items: center;
				  justify-content: center;
				  text{
					  margin-left: 10rpx;
				  }
			  }
			  &-list{
				  margin: 20rpx 0;
				  border-bottom:1px solid #e7f1fc;
			  }
			  &-operate{
				  width: 100%;
				  display: flex;
				  justify-content: space-between;
				  &-button{
					  height: 60rpx;
					  line-height: 60rpx;
					  font-size: 24rpx;
					  width: 25%;
					  background: #fff;
					  color: #016aed;
				  }
			  }
		  }
		  &-contentOpen{
			  height: auto;
			  overflow: visible;
		  }
		  &-contentClose{
			height: 0;
			 overflow: hidden;
		  }
	  }
	uni-button:after{
		border: none;
	}
	/deep/ .uni-list--border:after{
		background-color: transparent;
	}
  }
</style>
